{% extends "base.html" %}
{% block content %}
{% load static %}
	    <!-- Carousel
	    ================================================== -->
	    <div id="myCarousel" class="carousel slide">
	      <!-- Indicators -->
	      <ol class="carousel-indicators">
	        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
	        <li data-target="#myCarousel" data-slide-to="1"></li>
	        <li data-target="#myCarousel" data-slide-to="2"></li>
	      </ol>
	      <div class="carousel-inner">
	        <div class="item active">
	          <img src="{% static 'img2.jpg' %}" data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:First slide" alt="First slide">
	          <div class="container">
	            <div class="carousel-caption">
	              <h1>Empruntez, partagez</h1>
	              <p>ShareThings vous permet de partager et d'empruntez des objets près de chez vous. Ne dépensez plus jamais inutilement.</p>
	              <p><a class="btn btn-large btn-primary" href="{% url 'new-article' %}">Contribuez</a></p>
	            </div>
	          </div>
	        </div>
	        <div class="item">
	          <img src="{% static 'img1.jpg' %}" data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Second slide" alt="Second slide">
	          <div class="container">
	            <div class="carousel-caption">
	              <h1>Another example headline.</h1>
	              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
	              <p><a class="btn btn-large btn-primary" href="{% url 'new-article' %}">Contribuez</a></p>
	            </div>
	          </div>
	        </div>
	        <div class="item">
	          <img src="{% static 'img4.jpg' %}" data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Third slide" alt="Third slide">
	          <div class="container">
	            <div class="carousel-caption">
	              <h1>One more for good measure.</h1>
	              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
	              <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
	            </div>
	          </div>
	        </div>
	      </div>
	      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
	      <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
	    </div><!-- /.carousel -->	




			<ul class="pager">
			    <span class="step-links">
			        {% if page_obj.has_previous %}
			        	<li><a href="?page={{ page_obj.previous_page_number }}">Previous</a></li>			         
			        {% endif %}
					<li>
				        <span class="current">
				            Page {{ page_obj.number }} sur {{ page_obj.paginator.num_pages }}
				        </span>
					</li>
			        {% if page_obj.has_next %}
			         <li><a href="?page={{ page_obj.next_page_number }}">Next</a></li>
			            
			        {% endif %}
			    </span>
			</ul>
	    	<div class="row">
				{% for article in articles %}
					<div class="col-sm-6 col-md-3">	
						<div class="thumbnail">
					      	<img src="{{ MEDIA_URL }}{{ article.image }}" alt="casquette"  />
					      	<div class="caption">
						        <h3>{{ article.title }}</h3>
						        <p><strong>Ajouté le</strong> : {{article.date}} par <em>{{article.owner}} ({{ article.room }})</em></p>
						        <p><strong>Titre</strong> : {{ article.description|truncatewords:30}}</p>
						        <p><strong>Mail</strong> : {{ article.mail}}</p>
						        <p><strong>Tel</strong> : {{ article.tel}}</p>
						        <p><a href="#" class="btn btn-primary">Emprunter</a></p>
				      		</div>
			    		</div>
					</div>     
				{% empty %}
				    <p>Aucun article.</p>
				{% endfor %}
			</div>
{% endblock %}
